import Vue from 'vue'
import Vuex from 'vuex'

// 导入 请求权限的方法
import * as permissAPI from '@/api/permission'
// 引入递归路由的方法 引入我们处理好的 自动化路由配置文件
import recursionRoutes from '@/utils/recursionRoutes'
// 引入项目所有的路由
import allRoutes from '@/router/generateRoutes'
// 引入动态路由
import dynamicRoutes from '@/router/dynamicRoutes'
// 引入router实例 使用 router.addRoute() 方法
import router from '@/router'

// 使用(持久化寸尺) 企业级存储方案
import createPersistedState from 'vuex-persistedstate'
// 引入学生数据api
import * as stuApi from '@/api/student'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 角色菜单
    userMenu: [], // 侧边栏菜单
    userInfo: {}, // 用户信息
    currentProduct: {}, // 当前充值的产品对象
    breadCrumb: [], // 面包屑数据
    stuData: [], // 学员项目管理表格中数据
    loading: true, // 表格数据加载动画
    stuTotal: 0, // 总条目  初始化定义成 Number 类型 不然会报错
    stuPageSize: 10, //  每页显示的数量
    dialogVisible: false, // 控制dialog显示隐藏的值
    dialogTitle: '增加学员信息', // 控制dialog的标题
    steData: [], // 学员列表信息
    currentRow: {} // 编辑的时候, 表格回显的数据
  },
  getters: {},
  mutations: {
    // 修改dialog回显数据
    SET_CURRENT_ROW(state, payload) {
      state.currentRow = { ...payload }
    },
    // 显示dialog
    SHOW_DIALOG(state) {
      state.dialogVisible = true
    },
    // 隐藏dialog
    HIDE_DIALOG(state) {
      state.dialogVisible = false
    },
    // 切换 dialog 标题
    CHANGE_DIALOG_TITLE(state, payload) {
      state.dialogTitle = payload
    },
    // 设置用户菜单
    SET_MENULIST(state, payload) {
      state.userMenu = [...payload] // 浅拷贝

      // 动态添加路由 引入dynamic路由, 进行匹配, 匹配到 path === '/' 这个对象, 让我们用户路由 userMenu中的结果成为这个对象的children
      let target = dynamicRoutes.find(route => route.path === '/')

      // 将静态路由和动态路由拼接在一起  防止静态路由被覆盖掉
      target.children = [...target.children, ...payload]

      // console.log(target)  // 动态路由树形数组

      // 动态的将路由添加到根路由的routes选项中
      // 调用router.addRoute() 方法 动态添加路由, 参数是一个对象, 这个对象必须符合routes的配置
      router.addRoute(target)
    },

    // 修改用户信息
    SET_USERINFO(state, payload) {
      state.userInfo = payload
    },

    // 设置当前充值的产品
    SET_CURRENTPRODUCT(state, payload) {
      state.currentProduct = payload
    },
    // 设置面包屑数据
    SET_BREADCRUMB(state, payload) {
      state.breadCrumb = payload
    },
    // 设置学员项目管理表格中数据
    SET_STU_DATA(state, payload) {
      state.stuData = payload.data // 设置学员列表
      state.loading = false // 关闭加载动画
      state.stuTotal = payload.total // 设置分页总数
    },
    // 表格显示loading动画
    SHOW_LOADING(state) {
      state.loading = true
    },
    // 表示隐藏loading动画
    HIDE_LOADING(state) {
      state.loading = false
    }
  },
  actions: {
    // 请求菜单数据, 根据菜单数据
    // 1. 计算出角色(role)的菜单
    // 2. 计算出当前这个角色的合法路由
    // 获取用户菜单
    async FETCH_MENULIST(context, payload) {
      return permissAPI.getMenuList().then(res => {
        // console.log(res)
        // 后端返回的菜单数据
        let { menuList } = res.data
        // console.log(menuList);
        // 调用 recursionRoutes  只需要传入动态路由 Home静态组件的 children
        let userRountes = recursionRoutes(allRoutes[0].children, menuList)
        // console.log(userRountes)
        // 让 mutation 进行处理
        context.commit('SET_MENULIST', userRountes)
      })
    },
    // 获取学员列表
    async GET_STULIST({ commit }, payload = {}) {
      // 打开加载动画
      commit('SHOW_LOADING')
      let { page = 1, count = 10, classes = '' } = payload // 解构传递的参数
      let res = await stuApi.getStuList(page, count, classes)
      commit('SET_STU_DATA', res.data)
      // 关闭加载动画
      // commit('HIDE_LOADING')
    }
  },
  modules: {},
  // vuex 数据持久化配置
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.localStorage,
      // 存储的 key 的key值
      key: 'yue',
      paths: ['userInfo', 'currentProduct']
    })
  ]
})
